<!--  -->
<template>
  <div class="edit-sysformInfo">
    <SetDesignDialog :title="title" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="setFormCompDialog">
      <div class="edit-container-u" v-loading="loading">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本设置" name="1">
            <el-form :label-width="formLabelWidth" ref="formInfo" @submit.native.prevent v-if="form.contSetup">
              <el-form-item label="表单名称" class="requireStar">
                <el-input v-model="form.contSetup.formName" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="按钮文本" class="requireStar">
                <el-input v-model="form.contSetup.buttomText" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="验证码" class="requireStar">
                <el-input v-model="form.contSetup.vcodePlaceHolder" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-divider content-position="left">弹窗提示内容</el-divider>
              <el-form-item label="成功-弹窗标题" class="requireStar">
                <el-input v-model="form.contSetup.successTitleText" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="成功-弹窗按钮" class="requireStar">
                <el-input v-model="form.contSetup.successButtonText" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="失败-弹窗标题" class="requireStar">
                <el-input v-model="form.contSetup.errorTitleText" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="失败-弹窗按钮" class="requireStar">
                <el-input v-model="form.contSetup.errorButtonText" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="提交成功" class="requireStar">
                <el-input v-model.trim="form.contSetup.requestSuccess" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="请输入4位验证码" class="requireStar">
                <el-input v-model="form.contSetup.captchaRuleText" autocomplete="off" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="输入的验证码不匹配" class="requireStar">
                <el-input v-model="form.contSetup.captchaValid" autocomplete="off" size="medium"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="字段设置" name="2">
            <el-form :label-width="formLabelWidth" ref="formInfo" @submit.native.prevent v-if="form.compListSetup">
              <template v-for="item in form.compListSetup">
                <div :key="item.compId">
                  <el-divider content-position="left">{{item.label}}</el-divider>
                  <el-form-item label="标题文字" class="requireStar">
                    <el-input v-model="item.setupLabel" autocomplete="off" size="medium"></el-input>
                  </el-form-item>
                  <el-form-item label="提示文本">
                    <el-input v-model="item.setupPlaceholder" autocomplete="off" size="medium"></el-input>
                  </el-form-item>
                  <template v-for="ite in item.rules">
                    <div :key="item.compId + ite.rule">
                      <el-form-item label="必填警告文字" class="requireStar" v-if="ite.rule === 'required' && ite.value === '1'">
                        <el-input v-model="ite.defaultMessage" autocomplete="off" size="medium"></el-input>
                      </el-form-item>
                      <el-form-item label="最大长度警告文字" v-if="ite.rule === 'maxlength'" class="requireStar">
                        <el-input v-model="ite.defaultMessage" autocomplete="off" size="medium"></el-input>
                      </el-form-item>
                    </div>
                  </template>
                </div>
              </template>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>
<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
export default {
  props: {
    resetData: {
      type: Function
    }
  },
  data () {
    return {
      formLabelWidth: '180px',
      dialogShow: false,
      loading: true,
      activeName: '2',
      title: '表单设置',
      form: {}
    }
  },
  methods: {
    show (formId) {
      this.dialogShow = true
      this.loading = true
      this.$post('/form/get-form-comp-setup', {
        formId: formId
      }).then(response => {
        if (response) {
          this.title = response.contSetup.formName
          this.form = response
          this.activeName = '2'
          this.loading = false
          if (this.$refs['setFormCompDialog']) {
            this.$refs['setFormCompDialog'].open()
          }
          this.$nextTick(() => {
            this.activeName = '1'
          })
        } else {
          console.error('未能获取到系统表单配置！')
        }
      })
    },
    close () {
      if (this.$refs['formInfo']) {
        this.$refs['formInfo'].clearValidate()
      }
      this.dialogShow = false
      this.loading = true
      this.activeName = '2'
    },
    saveclose () {
      let formInfo = JSON.parse(JSON.stringify(this.form))
      for (let item in formInfo.contSetup) {
        if (item !== 'contId') {
          formInfo.contSetup[item].trim()
        }
      }
      if (!formInfo.contSetup.formName) {
        this.$message.error('表单名称不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.buttomText) {
        this.$message.error('按钮文本不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.vcodePlaceHolder) {
        this.$message.error('验证码不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.successTitleText) {
        this.$message.error('成功-弹窗标题不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.successButtonText) {
        this.$message.error('成功-弹窗按钮不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.errorTitleText) {
        this.$message.error('失败-弹窗标题不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.errorButtonText) {
        this.$message.error('失败-弹窗按钮不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.requestSuccess) {
        this.$message.error('提交成功不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.captchaRuleText) {
        this.$message.error('请输入4位验证码不能为空！')
        this.activeName = '1'
        return
      }
      if (!formInfo.contSetup.captchaValid) {
        this.$message.error('输入的验证码不匹配不能为空！')
        this.activeName = '1'
        return
      }
      let bool = false
      for (let i = 0; i < formInfo.compListSetup.length; i++) {
        let item = formInfo.compListSetup[i]
        item.setupLabel = item.setupLabel.trim()
        item.setupPlaceholder = item.setupPlaceholder.trim()
        if (!item.setupLabel) {
          this.$message.error('标题文字不能为空！')
          bool = true
          break
        }
        for (let j = 0; j < item.rules.length; j++) {
          item.rules[j].defaultMessage = item.rules[j].defaultMessage.trim()
          if (item.rules[j].rule === 'required' && item.rules[j].value === '1' && !item.rules[j].defaultMessage) {
            this.$message.error('必填警告文字不能为空！')
            bool = true
            break
          }
          if (item.rules[j].rule === 'maxlength' && !item.rules[j].defaultMessage) {
            this.$message.error('最大长度警告文字不能为空！')
            bool = true
            break
          }
        }
      }
      if (bool) {
        this.activeName = '2'
        return
      }
      this.loading = true
      this.$jpost('/form/save-form-comp-setup', formInfo).then(response => {
        this.resetData()
        this.loading = false
        this.close()
      })
    }
  },
  components: {
    SetDesignDialog
  }
}
</script>
<style scoped lang="scss">
.edit-container-u {
  min-height: 400px;
}
.edit-container-u /deep/ .el-divider__text{
  color:#999;
}
.edit-container-u /deep/ .el-form-item{
  margin-bottom: 10px;
}
.requireStar /deep/ .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
